<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>

		<style>
			body {
				margin: 0 auto;
				user-select: none;
			}

			.el-header {
				/* 上边 */
				background: linear-gradient(to right, #a6c1ee, #fbc2eb);
				border-bottom: 4px solid #fff;
				height: 200px;
			}

			.el-aside {
				/* 左边 */
				background-color: #ffffff;
				position: absolute;
				border-right: 4px solid #fff;
				top: 60px;
				bottom: 0;
			}

			.el-main {
				/* 右边 */
				background-color: #fdfbff;
				position: absolute;
				left: 200px;
				right: 0px;
				top: 60px;
				bottom: 0;
				padding: 0;
			}
		</style>

	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header></el-header>
				<el-container>
					<el-aside width="200px">
						<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
							default-expand-all="true"></el-tree>
					</el-aside>
					<el-main>
						<iframe :src="src" frameborder="0" style="width: 100%; height: 98%;"></iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				src: "./index.html",
				treedata: [{
					label: '一级 1',
					children: [{
							label: '按钮',
							href: "work1210/按钮.html"
						},
						{
							label: 'icon图标',
							href: "work1210/icon图标.html"
						},
						{
							label: 'layout布局',
							href: "work1210/Layout布局.html"
						},
						{
							label: '文字链接',
							href: "work1210/文字链接.html"
						},
						{
							label: '单选框',
							href: "work1210/单选框.html"
						},
						{
							label: '多选框',
							href: "work1210/多选框.html"
						},
						{
							label: '输入框',
							href: "work1210/输入框.html"
						},
						{
							label: '计数器',
							href: "work1210/计数器.html"
						},
						{
							label: '选择器',
							href: "work1210/选择器.html"
						},
						{
							label: '级联选择器',
							href: "work1210/级联选择器.html"
						},
						{
							label: '开关',
							href: "work1210/开关.html"
						},
						{
							label: '滑块',
							href: "work1210/滑块.html"
						},
						{
							label: '时间选择器',
							href: "work1210/时间选择器.html"
						},
						{
							label: '日期选择器',
							href: "work1210/日期选择器.html"
						},
						{
							label: '日期时间选择器',
							href: "work1210/日期时间选择器.html"
						},
						{
							label: '上传',
							href: "work1210/上传.html"
						},
						{
							label: '评分',
							href: "work1210/评分.html"
						},
						{
							label: '颜色选择器',
							href: "work1210/颜色选择器.html"
						},
						{
							label: '穿梭框',
							href: "work1210/穿梭框.html"
						},
						{
							label: '表单',
							href: "work1210/表单.html"
						},
						{
							label: '表格',
							href: "work1210/表格.html"
						},
						{
							label: '标签',
							href: "work1210/标签.html"
						},
						{
							label: '进度条',
							href: "work1210/进度条.html"
						}
					]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			},
			methods: {
				handleNodeClick(data) {
					this.src = data.href
					console.log(data.href);
				}
			}
		})
	</script>
</html>